<template>
<el-container class="login-one">
  <el-header></el-header>
  <el-main>
         <br><br><br><br><br><br>
      <el-row>
          <el-col :span="8" align="center">&nbsp;</el-col>
          <el-col :span="8" align="center" style="background-color: white;border-radius: 5px;">
             <h1 align="center">用户登录</h1>
             <br>
             <template v-if="isShow==0">
             <!-- 邮箱登录-->
              <el-form  label-width="100px" >
                  <el-form-item label="邮箱">
                      <el-col :span="20">
                         <el-input v-model="userInfo.email"></el-input>
                      </el-col>
                  </el-form-item>

                  <el-form-item label="验证码">
                    <el-col :span="20">
                        <el-input v-model="userInfo.code"></el-input>
                    </el-col>
                  </el-form-item>

                  <el-row>
                      <el-col :span="2" align="center">&nbsp;</el-col>
                      <el-col :span="20" >
                        <el-button type="success" size="mini" @click="sendCode" :disabled="isDis">发送验证码({{num}})</el-button>
                        <el-button type="success" size="mini" @click="emailLogin(0)" >登录</el-button>
                      </el-col>
                      <el-col :span="2" align="center">&nbsp;</el-col>

                  </el-row>
                   <br>
              </el-form>
            </template>
                <template v-else-if="isShow==1">
              <!-- 短信登录-->
               <el-form  label-width="100px" >
                   <el-form-item label="手机">
                       <el-col :span="20">
                          <el-input v-model="userInfo.phone"></el-input>
                       </el-col>
                   </el-form-item>

                   <el-form-item label="验证码">
                     <el-col :span="20">
                         <el-input v-model="userInfo.code"></el-input>
                     </el-col>
                   </el-form-item>

                   <el-row>
                       <el-col :span="2" align="center">&nbsp;</el-col>
                       <el-col :span="20" >
                         <el-button type="success" size="mini" @click="sendCode" :disabled="isDis">发送验证码({{num}})</el-button>
                         <el-button type="success" size="mini" @click="emailLogin(1)" >登录</el-button>
                       </el-col>
                       <el-col :span="2" align="center">&nbsp;</el-col>

                   </el-row>
                    <br>
               </el-form>
                  </template>
              <template v-else>
               <!-- 用户登录-->
                <el-form  label-width="100px" >
                    <el-form-item label="用户名">
                        <el-col :span="20">
                           <el-input v-model="userInfo.userName"></el-input>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="密码">
                      <el-col :span="20">
                          <el-input v-model="userInfo.userPwd" show-password></el-input>
                      </el-col>
                    </el-form-item>

                    <el-row>
                        <el-col :span="2" align="center">&nbsp;</el-col>
                        <el-col :span="20" >
                          <el-button type="success" size="mini" @click="emailLogin(2)" >登录</el-button>
                        </el-col>
                        <el-col :span="2" align="center">&nbsp;</el-col>

                    </el-row>
                     <br>
                </el-form>
                </template>

               <div >
                  <el-button type="text" size="mini" @click="change(0)" >邮箱登录</el-button>
                  <el-button type="text" size="mini" @click="change(1)" >短信登录</el-button>
                  <el-button type="text" size="mini" @click="change(2)" >账号登录</el-button>
               </div>

           </el-col>
         <el-col :span="8" align="center">&nbsp;</el-col>
      </el-row>
  </el-main>
</el-container>

</template>

<script>
  export default {
        name:"email",
        data(){
            return{
               userInfo:{
                    email:"767920412@qq.com",
                    phone:"",
                    code:"",
                    userName:"",
                    userPwd:""
               },
               isShow:0,//0 代表邮箱登录，1代表短信登录，2 用户登录
               num:10,//倒计时
               isDis:false//发送验证码按钮禁用值
            }
        },
        methods:{
            sendCode(){
                var self = this;
                var http =this.$http.get("/user/sendCode",{params:this.userInfo});
                http.then(function(rs){
                     console.log(rs.data);
                     self.$message(rs.data.info);
                     if(rs.data.success){
                       //禁用发送验证码按钮
                       self.isDis = true;
                       //开启倒计时
                       var time = setInterval(function(){
                        self.num--;
                        if(self.num==0){
                          //开启发送验证吗按钮
                          self.isDis =false;
                          //清除计时器
                          clearInterval(time);
                        }
                       },1000);
                     }
;                })
            },
            emailLogin(num){
              if(num==0){
                var self = this;
                var http =this.$http.get("/user/emailLogin",{params:this.userInfo});
                http.then(function(rs){
                    self.$alert(rs.data.info);
                })
              }else if(num==1){
                //短信登录
              }else{
                //账号登录
                sessionStorage.setItem("name",this.userInfo.userName);
                //跳转到系统主页面
                this.$router.push("/testWs");


              }

            },
            change(num){
              this.isShow = num;
            }
        }
  }
</script>

<style>
    html,body{
      margin: 0px;
      height: 100%;
    }

      .login-one{
             background-color:#1c77ac;
             background-image:url(../../assets/light.png);
             background-repeat:no-repeat;
             overflow:hidden;
             height: 100%;
        }
</style>
